<!DOCTYPE html>
<html>
<head>
    <TITLE> 树表</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../resources/css/pluginsExt/standard/standard.css" type="text/css">
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/css/style.css"/>
    <script type="text/javascript" src="../../resources/js/jquery-2.1.1.js"></script>
    <script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../resources/js/plugins/ztree/jquery.ztree.all-3.5.min.js"></script>
    <script src="../../resources/js/plugins/layer/layer.js"></script>
    <script src="../../resources/js/plugins/bootstrap-fileinput/fileinput.min.js"></script>
    <script src="../../resources/js/plugins/artTemplate/template.js"></script>
    <script src="../../resources/js/plugins/bootstrap-fileinput/locales/zh.js"></script>
    <style>
    </style>
</head>
<body style="overflow: hidden">
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="content_wrap  col-md-2" style="z-index: 2000">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="col-md-10" style="z-index: 100000;">
                    <div>
                        <div class="col-md-9">
                            <h5 class="col-md-2 control-label" style="line-height: 30px">内容：</h5>
                            <ul class="nav nav-pills col-md-9" id="myTab">
                            </ul>
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-primary btnEdit">
                                <i class="fa fa-pencil-square-o"></i> 编辑</button>
                            <button class="btn btn-primary">
                                <i class="fa fa-bars"></i> 汇总查看</button>
                        </div>
                        <div class="tab-pane active col-md-9" id="home">
                        <div class="tab-content">
                            <h5 class="col-md-2 control-label" style="line-height: 30px">等级：</h5>
                            <ul class="nav nav-pills col-md-9" id="levTab">
                                <li class="active"><a id="classA">特级</a></li>
                                <li><a id="classB">一级</a></li>
                                <li><a id="classC">二级</a></li>
                            </ul>
                        </div>
                       </div>
                    </div>
                </div>
                <iframe id="norm"  src="norm.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
</body>
<script id="content" type="text/html">
    {{each conData}}
      {{if $index==0}}
            <li class="active"><a id="{{$value.id}}" href="{{$value.url}}">{{$value.text}}</a></li>
            {{else}}
            <li><a id="{{$value.id}}" href="{{$value.url}}">{{$value.text}}</a></li>
      {{/if}}
    {{/each}}
</script>
<script type="text/javascript">
    var content={
        'conData':[
            {'id':'norm',text:'品质指标',url:'norm.html'},
            {'id':'method','text':'评审方法',url:'method.html'},
            {'id':'condition','text':'评审条件',url:'condition.html'}
        ]
    }
    //渲染
    var contentHtml = template('content', content);
    document.getElementById('myTab').innerHTML = contentHtml;
    //if高度自适应
    var ifh=document.getElementsByTagName('iframe')[0];
    ifh.height=document.documentElement.clientHeight-100;
    $('ul.ztree').height(document.documentElement.clientHeight-150);
    var abc;
    var pilis=$('.nav-pills li');
    abc=ifwa(pilis[0])
    pilis.on('click',function(e){
        $(this).attr('class','active').siblings().attr('class','')
        if($(this).children().attr('id')!='norm'){
            $('.tab-content').hide()
        }else{
            $('.tab-content').show()
        }
        e.preventDefault();
        var obj=$(this)
        ifwa(obj);
        abc=ifwa(obj);
    });
    function ifwa(obj){
        //更换iframe
        var ifSrc=$(obj).children().attr('href');
        $('iframe').attr('src',ifSrc)
        var nowLi=$(obj).children().attr('id');
        //更换当前编辑按钮链接的窗口
        return nowLi;
    };
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            selectedMulti: false
        },
        check:{
            enable:true
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    function zTreeOnClick(event, treeId, treeNode) {
        var cont=treeNode.src;
        $('iframe').attr('src',cont)
    };
    
    var zNodes =[
        { id:1, pId:0, name:"茶叶分类", open:true,},
        { id:11, pId:1, name:"红茶",open:true,},
        { id:111, pId:11, name:"功夫茶",open:true,},
        { id:1111, pId:111, name:"祁门功夫",open:true,src:'redTea.html'},
        { id:1112, pId:111, name:"坦洋功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1113, pId:111, name:"滇红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1114, pId:111, name:"宁红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1115, pId:111, name:"英德红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1116, pId:111, name:"金毫红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:112, pId:11, name:"乌龙茶",src:'../dialog/dialog.html'},
        { id:113, pId:11, name:"白茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:114, pId:11, name:"黄茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"黑茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"绿茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:1, pId:0, name:"茶叶分类", open:true,},
        { id:11, pId:1, name:"红茶",open:true,},
        { id:111, pId:11, name:"功夫茶",open:true,},
        { id:1111, pId:111, name:"祁门功夫",open:true,src:'redTea.html'},
        { id:1112, pId:111, name:"坦洋功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1113, pId:111, name:"滇红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1114, pId:111, name:"宁红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1115, pId:111, name:"英德红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1116, pId:111, name:"金毫红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:112, pId:11, name:"乌龙茶",src:'../dialog/dialog.html'},
        { id:113, pId:11, name:"白茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:114, pId:11, name:"黄茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"黑茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"绿茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:1, pId:0, name:"茶叶分类", open:true,},
        { id:11, pId:1, name:"红茶",open:true,},
        { id:111, pId:11, name:"功夫茶",open:true,},
        { id:1111, pId:111, name:"祁门功夫",open:true,src:'redTea.html'},
        { id:1112, pId:111, name:"坦洋功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1113, pId:111, name:"滇红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1114, pId:111, name:"宁红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1115, pId:111, name:"英德红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1116, pId:111, name:"金毫红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:112, pId:11, name:"乌龙茶",src:'../dialog/dialog.html'},
        { id:113, pId:11, name:"白茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:114, pId:11, name:"黄茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"黑茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"绿茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:1, pId:0, name:"茶叶分类", open:true,},
        { id:11, pId:1, name:"红茶",open:true,},
        { id:111, pId:11, name:"功夫茶",open:true,},
        { id:1111, pId:111, name:"祁门功夫",open:true,src:'redTea.html'},
        { id:1112, pId:111, name:"坦洋功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1113, pId:111, name:"滇红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1114, pId:111, name:"宁红功夫",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1115, pId:111, name:"英德红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1116, pId:111, name:"金毫红茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:112, pId:11, name:"乌龙茶",src:'../dialog/dialog.html'},
        { id:113, pId:11, name:"白茶",src:'../bootstrap-fileinput/fileinput.html'},
        { id:114, pId:11, name:"黄茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"黑茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
        { id:114, pId:11, name:"绿茶",src:'../bootstrap-table-develop/bootstrapTab.html'},
    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var treeObj = $.fn.zTree.getZTreeObj("tree");
    });

    $(function(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree.getNodeByParam("id", 1111, null);
        zTree.selectNode(node);
    })
    $('.btnEdit').on('click',function(){
        var layer=parent.layer.open({
            type: 2,
            skin: 'layui-layer-lan',
            title: '<h4 class="inline">茶叶分类:金毫红茶</h4><h4 class="inline">品质等级:特级</h4><h4 class="inline">给分:90~99</h4>',
            fix: true,
            shade: 0.3,
            maxmin: true,
            area: ['70%', '85%'],
            shadeClose: true, //开启遮罩关闭
            btn:['保存'],btn1:function(index,layero){//保存按钮的回调
                var body=layer.getChildFrame($('body'), index);
                var iframeWin = layero.find('iframe')[0].contentWindow;
                iframeWin.he();
                location.reload();
                parent.parent.layer.msg('保存成功', {time:3000,icon: 1})
                setInterval(function(){
                    parent.layer.closeAll();
                },5000)
            },
            content: 'newModule/standard/'+abc+'Edit.html',
        });
        parent.layer.iframeAuto(layer);
    });
</script>
</html>